<?php use yii\helpers\Url; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv=”content-language” content="zh-CN"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name=viewport content="width=device-width,initial-scale=1">
    <meta http-equiv="pragma" content="no-cache"/>
    <meta http-equiv="expires" content="0"/>
    <META name="copyright" content="">
    <meta name="keywords" content="进销存">
    <meta name="description" content="">

    <link rel="Shortcut Icon" href="/images/favicon.ico">
    <link rel="stylesheet" type="text/css" href="/statics/css/style.css?version=v6.4.3"/>
    <link rel="stylesheet" type="text/css" href="/statics/css/login.css"/>

    <script src="https://cdn.bootcss.com/jquery/1.8.2/jquery.min.js"></script>

    <title>登录</title>
</head>
<style>
    ::-webkit-input-placeholder {
        /* WebKit browsers */
        color: #999;
    }

    :-ms-input-placeholder {
        /* Internet Explorer 10+ */
        color: #999;
    }

    body {
        width:100%!important;
        min-width:0px!important;
        height: 608px;
    }

    .placeholder {
        color: #d4d4d4 !important
    }

    .main {
        width: 100%;
        height: 579px;
        background-size: 100%
    }

    .container {
        margin: 0 auto;
        width: 100%
    }


    .login-box {
        width: 356px;
        border-radius: 6px;
        background-color: #ffffff;
        box-shadow: 0 2px 4px 0 rgba(197, 200, 201, 0.23);
        margin: 48px auto;
        /*float: right;*/
    }

    @media all and (min-width:600px) {
        .login-box {
            width: 356px;
            border-radius: 6px;
            background-color: #ffffff;
            box-shadow: 0 2px 4px 0 rgba(197, 200, 201, 0.23);
            margin: 48px auto;
            margin-right: 200px;
            float: right;
        }
    }


    .mobileList {
        width: 200px;
        max-height: 176px;
        overflow-y: auto;
        border-radius: 3px;
        background-color: #ffffff;
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12);
        border: solid 1px rgba(0, 0, 0, 0.11);
        position: absolute;
        z-index: 1000;
        margin-top: -1px;
        display: none;
        height: 176px;
    }

    .mobileList li {
        height: 28px;
        line-height: 28px;
        padding: 0 14px !important;
        cursor: pointer;
        color: #636363;
        font-size: 13px;
        text-align: left
    }

    .mobileList li:hover {
        background-color: #f5f5f5;
    }

    .mobileGroup:after {
        content: '';
        display: inline-block;
        width: 0;
        height: 0;
        border-width: 5px 5px 0;
        border-style: solid;
        border-color: #999 transparent transparent transparent;
        position: absolute;
        right: 8px;
        top: 19px;
    }

    .mobileGroup {
        line-height: 44px;
        width: 82px;
        height: 42px;
        position: relative;
        border: 1px solid #d5d5d5;
        border-right: 0;
        border-radius: 3px 0 0 3px;
        display: inline-block;
        text-align: left;
    }

    _::-webkit-full-page-media,
    _:future,
    :root .safari_only {
    . mobileGroup width: 82 px;
        height: 38px;
        position: relative;
        top: 1px;
        border: 1px solid #d5d5d5;
        border-radius: 3px;
        display: inline-block;
        text-align: left;
    }

    }
    #mobileName {
        display: inline-block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        text-align: left;
        width: 81%;
        padding: 0 8px;
    }

    .mobileNum {
        float: right;
    }

    .mobileCountry {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: inline-block;
        width: 102px;
    }

    .loginName {
        width: 212px;
        padding-left: 8px;
        margin-left: -6px;
        border-left: 0;
        border-radius: 0 3px 3px 0;
    }

    .loginName:focus {
        width: 210px !important;
        padding-left: 8px !important;
    }
</style>

<body>

<!--  begin of header-->
<div class="n_header_n" style="">

    <!--begin: header部分  -->
    <!--  class="logo" -->
    <div style="">
        <img src="/statics/img/logo.png" onclick="toIndex()"
             style="height:33px;margin-top:14px;cursor:pointer;margin-left:35px">

        <!-- <input name="regBtn" id="regBtn" class="regBtn" type="button" onclick="toReg();" value="注册" style="float:right;margin-right:60px;margin-top:15px;"> -->
    </div>
</div>
<div class="container">
    <div class="tip"
         style="width:100%;height:38px;position:fixed;left:0;top:0px;z-index:100;background-color:#FFF9E3;display:none">
        <span class="close" style="float:right;position:relative;top:-29px;right:20px;color:red;">x</span>
    </div>
    <div class="main" style="background:url(/statics/img/login.jpg);background-size: 100% 100%">
        <div>
            <div class="login-box">
                <div class="login_cnzz" id="login_cnzz">
                    <div class="login-sub">
                        <div class="login-sub-title">
                            <span id="lgSpan" class="active" onclick="toEmailLogin('mobile')">用户登录</span>
                            <span></span>
                        </div>
                        <div style="width:100%;text-align:center;margin-top:24px">
                            <div style="margin-top:20px" class="passWord">
                                <input class="form-control loginInput" tabindex="2" class="text" id="username"
                                       type="text" placeholder="用户名" value="" style="background-color:#fff!important"/>
                                <div class="errorTip" id="errorUsername" style="margin-left:36px;display:none">&nbsp;&nbsp;用户名不能为空</div>

                            </div>
                            <div style="margin-top:20px" class="passWord">
                                <input class="form-control loginInput" tabindex="2" class="text" id="password"
                                       type="password" placeholder="密码" value=""
                                       style="background-color:#fff!important"/>
                                <div class="errorTip" id="errorPassword" style="margin-left:36px;display:none">&nbsp;&nbsp;密码不能为空</div>

                            </div>
                            <div style="margin-top:20px" class="passWord">
                                <input class="form-control loginInput" style="width:130px" tabindex="1" class="text"
                                       id="captcha" type="text" placeholder="验证码" value=""
                                       style="background-color:#fff!important"/>
                                <img src="/login/captcha" onclick="change_captcha(this)"/>
                            </div>
                        </div>


                        <div class="login-btn"
                             style="margin-top:20px;width:100%;text-align:center;margin-left:0;margin-bottom:0;">
                            <input name="regBtn" id="submitBtn" type="button" onclick="login();" value="登录"
                                   style="height:44px"/>
                        </div>
                        <div class="rememberfield" style="width:100%;margin-top:12px;margin-left:22px">
                            <input type="checkbox" id="remember" onclick="add_cookie()"/>记住密码
                        </div>
                    </div>
                </div>
                <div class="">
                    <div style="margin-top:34px;margin-bottom:36px;overflow:auto">

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<style>
    .copyright {
        height: 10px;
        position: relative;
    }
</style>
<div class="new_footer">
    <div class="copyright l" style="background-color:transparent;margin:23px auto;text-align:center;">
        Copyright 2016 jingsourcing.com
    </div>
</div>
<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script>
    $(function () {
        var remember = localStorage.getItem("remember");
        if (remember == 1) {
            $("#remember").attr('checked', true);
            $("#username").val(localStorage.getItem("username"));
            $("#password").val(localStorage.getItem("password"));
        }
    })

    function add_cookie() {
        if ($("#remember")[0].checked) {
            localStorage.setItem("remember", 1)
        } else {
            localStorage.setItem("remember", 0)
        }
    }

    document.onkeypress = function (e) {
        if (e.code == 'Enter') {
            login();
        }
    }

    function login() {
        var url = "<?php echo Url::to(['login/validate']);?>";
        var username = $("#username").val();
        var password = $("#password").val();
        var captcha = $("#captcha").val();

        if (!captcha) {
            alert('验证码未填');
            return false;
        }
        if (!username) {
            $("#errorUsername").show();
            return false;
        }
        if (!password) {
            $("#errorPassword").show();
            return false;
        }
        localStorage.setItem("username", username)
        localStorage.setItem("password", password)
        $.post(url, {
            name: username,
            password: password,
            captcha: captcha
        }, function (res) {
            if (res.status == 1) {
                if (res.role == 6) {
                    window.location.href = "/purchase/product_list";
                } else if(res.role==13) {
                    window.location.href = "/setting/top10-product";
                } else {
                    window.location.href= "/setting/index";
                }

            } else {
                alert(res.msg);
            }
        }, 'json')
    }

    function change_captcha(e) {
        e.src = "/login/captcha?v=" + Math.random();
    }
</script>
</body>

</html>